<!-- 登录 -->
<template>
	<view class="login-content">
		<view class="login-body">
			<view class="login-item">
				<image src="../../static/login/个人中心.png"></image>
				<input v-model="phone" placeholder="请输入手机号" />
			</view>
			<view class="login-item">
				<image src="../../static/login/24gl-lock.png"></image>
				<input v-model="pwd" password placeholder="请输入密码" />
			</view>
			<button @click="login" class="login-button">立即登录</button>
		</view>
		<view class="login-bpttom">

		</view>
	</view>
</template>

<script>
import {mapActions,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				phone: '', // 手机号
				pwd: '', // 密码
			}
		},
		methods: {
			...mapActions('Login',['LoginCellphone']),
			...mapMutations(['setUserInfo']),
			login(){
				let re = /^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/
				if (! (re.test(this.phone))){
					uni.showToast({
						title:'手机号输入错误！',
						icon:'error'
					})
					return
				}
				if (!this.pwd){
					uni.showToast({
						title:'密码不能为空！',
						icon:'error'
					})
					return
				}
				this.LoginCellphone({
					phone:this.phone,
					password:this.pwd
				}).then(info=>{
					if (info['code']===200){
						this.setUserInfo(info['profile'])
						uni.setStorage({
							key:'cookie',
							data:info['cookie']
						})
						uni.setStorage({
							key:'UserInfoNid',
							data:info['profile']['userId']
						})
						uni.setStorage({
							key:'token',
							data:info['token']
						})
						uni.switchTab({
							url:'/tabBar/User/User',
							success() {
								uni.showToast({
									icon:'success',
									title:'登录成功'
								})
							}
						})
					}else{
						uni.showToast({
							icon:'error',
							title:info['message']
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.login-content {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 100%;
	}

	.login-body {
		width: 80%;
		height: 60%;

		.login-item {
			display: flex;
			align-items: center;
			border-bottom: 2rpx #fff solid;
			height: 85rpx;
			margin-bottom: 30rpx;

			image {
				height: 60rpx;
				width: 60rpx;
				margin-right: 20rpx;
			}

			input {
				width: 100%;
				color: #fff;
			}
		}

		.login-button {
			color: #fff;
			background-color: #66b4f6;
			margin-top: 60rpx;
		}
	}
</style>
